<template>
  <el-menu :collapse="isCollapse" @open="handleOpen" @close="handleClose">
    <template v-for="item in routes" :key="item.id">
      <el-sub-menu
        v-if="item.children && item.children.length"
        :index="item.name"
      >
        <template #title>
          <el-icon><location /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item
          v-for="subItem in item.children"
          :key="subItem.name"
          :index="subItem.name"
          @click="handleJump(subItem)"
        >
          {{ subItem.name }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item @click="handleJump(item)" :index="item.name" v-else>
        <el-icon><document /></el-icon>
        <template #title>{{ item.name }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { menuList } from "@/json";
import { useRouter } from "vue-router";
import routes from "../router/routes";
const router = useRouter();
const isCollapse = ref(false);

const handleJump = (item) => {
  router.push({
    path: item.url,
  });
};

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, menuList);
};
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
</script>

<style scoped></style>
